<template>
  <div class="container">
    <search-nav :statusBarHeight="statusBarHeight" :color="globalStyle.color2" searchType="seller-other"></search-nav>
    <div class="tabs-bar line-size order-tabs"  :style="'top: '+ statusBarHeight +'px;background-color:'+globalStyle.color2+';border-bottom: 1px solid ' + globalStyle.color2+';'">
      <van-tabs :active="activeIndex" @change="tabClick" :border="false">
        <van-tab :title="item" v-for="(item, index) in orderStatusList" :key="index"></van-tab>
      </van-tabs>
    </div>
    <div class="height-39"></div>
    <div class="pull-refresh">
      <div v-for="(item, index) in orders" :key="index">
        <div class="order-div mar-b-10 pad-t-13 pad-b-10 pad-l-15 pad-r-15">
          <div class="flex v-align-c mar-b-9">
            <img class="userinfo-avatar" :src="item.customerAvatar" mode="cover"/>
            <span class="flex-item">{{item.customerNickname}}</span>
            <div v-if="item.orderStatus === 0" class="font-orange font-14">待付款</div>
            <div v-if="item.orderStatus === 1" class="font-orange font-14">待发货</div>
            <div v-if="item.orderStatus === 2" class="font-orange font-14">待收货</div>
            <div v-if="item.orderStatus === 3" class="font-orange font-14">已收货</div>
            <div v-if="item.orderStatus === 4" class="font-orange font-14">已完成</div>
          </div>
          <div>
            <div class="goods-list-item" v-for="(goods, goodsIndex) in item.orderGoodsList" :key="goodsIndex"
              @click="queryOrderInfo(item)">
              <div class="barbg pad-t-10 pad-b-10 pad-l-20 pad-r-20 mar-l--20 mar-r--20">
                <div class="flex">
                  <div class="mar-r-10">
                    <img :src="goods.goodsImageUrl" class="img-item"/>
                  </div>
                  <div class="flex-item">
                    <div class="goods-title mar-t--2">{{goods.goodsTitle}}</div>
                    <div class="goods-prop font-color-9 font-12 mar-t-3 mar-b-7">{{ goods.skuDetail }}</div>                  
                    <div class="height-18">
                      <div v-if="goods.memberCommission && goods.memberCommission > 0" class="font-12 income-bar height-17">
                        <div class="flex flex-center height-17">赚{{goods.memberCommission}}元</div>
                      </div>
                    </div>
                    <div class="flex font-13">
                      <div class="font-black flex-item">
                        <div class="flex v-align-c font-16 price-col-n">
                          <span v-if="item.orderGoodsList.length > 1" class="flex-item">¥{{goods.goodsPrice}}</span>
                          <span v-if="item.orderGoodsList.length == 1" class="flex-item">¥{{item.actualPrice}}</span>
                          <span>×{{goods.goodsNum}}</span>
                        </div>
                      </div>
                    </div>
                    <!--  退款关闭: -3、4、3（数量全退完）
                        退款：-2、-1、3(数量未退完)、''
                        退款中：0、1、2 -->
                    <div class="flex mar-t-5">
                      <div class="flex-item"></div>
                      <template v-if="urlFrom !== 'myDistribution'">
                        <template v-if="item.orderStatus !== -2 && item.orderStatus !== -1 && item.orderStatus !== 0 && item.orderStatus !== 1 && item.orderStatus !== 4">
                          <div @click.stop="linkToDetail(goods)"
                            v-if="!goods.afterSaleGoodsNum && goods.afterSaleStatus===0 || !goods.afterSaleGoodsNum && goods.afterSaleStatus===1 || !goods.afterSaleGoodsNum && goods.afterSaleStatus===2">
                            <div class="action-btn font-13 mar-b-2">退款中</div>
                          </div>
                          <div class="action-btn font-13 mar-b-2" @click.stop="linkToDetail(goods)"
                            v-else-if="goods.afterSaleStatus===-3 || goods.afterSaleStatus===4 || (goods.afterSaleStatus===3 && (goods.afterSaleGoodsNum <= goods.goodsNum))">退款成功</div>
                        </template>
                      </template>
                      <div v-if="item.cancelFlag === 1" class="action-btn font-13 mar-b-2">退款中</div>
                    </div>
                  </div>
                </div>
                <div class="border-b-less2 mar-t-8 mar-b--5"></div>
              </div>            
            </div>
          </div>
          <div class="flex border-b-less pad-t-8 pad-b-8 font-15 mar-b-10">
            <span class="flex-item">共{{ item.orderGoodsList ? item.goodsLength : 0 }}件</span>
            <div class="text-align-r">
              <div>
                合计：
                <span class="font-red">
                  <span class="font-11">¥</span>{{ item.orderGoodsDeliveryType === 11 ? (item.actualPrice - item.freight) : item.actualPrice }}
                </span>
              </div>
            </div>
          </div>
          <div class="flex">
            <div class="flex-item"> </div>
            <div class="mar-r--10">              
              <span v-if="item.orderStatus===2 || item.orderStatus===3"
                class="order-btn mar-r-10" @click="queryExpress(item)">查看物流
              </span>
            </div>
          </div>
        </div>
      </div>
      <div class="pad-10 mar-t-10 align-c" v-if="orders.length===0">
        <img v-if="fileSpace" mode="widthFix" class="width-153 height-75 mar-t-30"
             :src="fileSpace + '/images/2-0-kong.png'"/>
        <div class="pad-t-20 font-14 font-gray">空空如也</div>
      </div>
    </div>
    <div class="pad-10"></div>
  </div>
</template>

<script>
  import SearchNav from '@/components/SearchNav'
  import {
    pageProjectOrderByMemberId
  } from '@/api/distribution'
  import {
    getMemberInfo
  } from '@/api/home'

  export default {
    components: { SearchNav },
    data() {
      return {
        orderStatusList: ['全部', '待付款', '待发货', '待收货', '已收货', '已完成', '已取消'],
        activeIndex: 0,
        userInfo: {},
        orderStatusMap: {},
        orders: [],
        orderInfo: {},
        currentPage: 1,
        pullLoad: {
          loading: false,
          finished: false
        },
        memberInfo: {},
        statusBarHeight: 0,
        urlFrom: '',
        statusIs: false, // 区分买家卖家
        globalStyle: {}
      }
    },
    onLoad() {
      // 初始化data
      Object.assign(this.$data, this.$options.data())
      this.statusBarHeight = this.$pt.getSystemInfoSync()['statusBarHeight'] + 44
    },
    onShow() {
      let getAppInfo = this.$pt.getStorageSync('appInfo')
      this.globalStyle = getAppInfo.style
      this.urlFrom = this.getCurrentPage().query.urlFrom
      // 售后页面，返回订单详情时，需获取订单最新的售后状态
      if (this.$pt.getStorageSync('refundType')) {
        this.initEls()
      }
    },
    mounted() {
      this.initEls()
    },
    onPullDownRefresh() {
      this.pullLoad.finished = false
      this.currentPage = 1
      this.orders = []
      this.pageProjectOrderByMemberId()
      setTimeout(() => {
        this.$pt.stopPullDownRefresh()
      }, 500)
    },
    onReachBottom() {
      // 触底刷新
      if (!this.pullLoad.finished) {
        this.pageProjectOrderByMemberId()
      }
    },
    methods: {
      initEls() {
        this.$pt.removeStorageSync('refundType')
        const type = this.getCurrentPage().query.type
        switch (type) {
          case 'wDeliver':
            // 待发货
            this.activeIndex = 2
            break
          case 'shipped':
            // 已发货
            this.activeIndex = 3
            break
          case 'received':
            // 已收货
            this.activeIndex = 4
            break
        }
        this.pageProjectOrderByMemberId()
        this.getMemberInfo()
      },
      linkToDetail(sku) {
        let value = JSON.stringify(sku)
        this.$pt.navigateTo({url: `/pages/personal/order/refund-detail/main?sku=${value}`})
      },
      getMemberInfo() {
        getMemberInfo(this.getCustomerId).then(response => {
          if (response.isError) return
          this.memberInfo = response.data
          this.memberInfo.nickname = this.$utils.getStrByLength(this.memberInfo.nickname, 18)
        })
      },
      tabClick(e) {
        this.orders = []
        this.currentPage = 1
        this.activeIndex = e.mp.detail.index
        this.pullLoad.finished = false
        this.pageProjectOrderByMemberId()
      },
      pageProjectOrderByMemberId() {
        let orderStatus = ''
        switch (this.activeIndex) {
          default:
          case 0:
            // 全部
            orderStatus = ''
            break
          case 1:
            // 待付款
            orderStatus = '0'
            break
          case 2:
            // 待发货
            orderStatus = '1,20'
            break
          case 3:
            // 已发货
            orderStatus = '2'
            break
          case 4:
            // 已收货
            orderStatus = '3'
            break
          case 5:
            // 已收货
            orderStatus = '4'
            break
          case 6:
            // 已取消
            orderStatus = '-1,-2'
            break
        }
        const params = {
          memberId: this.getCustomerId,
          orderStatusList: orderStatus,
          currentPage: this.currentPage,
          size: 10
        }
        pageProjectOrderByMemberId(params).then((response) => {
          if (response.isError) return
          response.data.records.forEach(item => {
            item.goodsLength = 0
            // 根据拆分订单id重组
            const apartOrderSet = new Set()
            item.orderGoodsList.forEach(value => {
              apartOrderSet.add(value.apartOrderId)
              item.goodsLength += value.goodsNum
            })
            item.apartOrderIds = [...apartOrderSet]
            this.orders.push(item)
          })
          this.currentPage++
          if (this.orders.length === 0 || this.orders.length >= response.data.total) {
            this.pullLoad.finished = true
          }
        }).catch(() => {
        })
      },
      queryOrderInfo(order) {
        this.$pt.navigateTo({ url: '/pages/personal/distribution/order/detail/main?orderId=' + order.orderId })
      },
      queryExpress(order) {
        // 根据拆分订单ID判断
        if (order.apartOrderIds.length > 1) {
          this.$pt.navigateTo({ url: `/pages/personal/order/express-view/main?orderId=${order.orderId}&orderFrom=${order.orderFrom}` })
        } else {
          this.$pt.navigateTo({ url: `/pages/personal/order/express-detail/main?orderId=${order.orderId}&orderFrom=${order.orderFrom}` })
        }
        // this.$pt.navigateTo({ url: '/pages/personal/distribution/order/express/main?orderId=' + order.orderId })
      }
    }
  }
</script>

<style lang="less" scoped>  
  .container{
    width: 100%;
    overflow: hidden;
  }
  .userinfo-avatar {
    width: 33px;
    height: 33px;
    border-radius: 50%;
    margin-right: 6px;
  }
  .border-b-less{
    border-bottom: #f5f5f5 1px solid;
  }
  .border-b-less2{
    border-bottom: #f2f2f2 1px solid;
  }
  .goods-list-item{
    &:last-child{
      .border-b-less2{
        border-bottom: none;
      }
    }
  }
  .income-bar{
    background: #ffe1d1;
    display: inline-block;
    color: #FF5A00;
    padding: 0 3px;
    border-radius: 4px;
    line-height: unset
  }
  .price-col-n{
    color: #343434;
  }
  .action-btn {
    color: #666;
    background-color: #fff;
    height: 24px!important;
    line-height: 24px!important;
    padding: 0px 15px!important;
    border: 1px solid #e9e9e9;
    border-radius: 50px;
  }
  .type-0{
    color: #f94035;
  }
  .type-1{
    color: #ff6600;
  }  
  .type-2{
    color: #409eff;
  }
  .type-3{
    color: #ff6600;
  }
  .type-4{
    color: #67c23a;
  }
  .type--10, .type--11{
    color: #ff6600;
  }
  .type--1{
    color: #000;
  }
  .border-b{
    border-bottom: #e4e4e4 1px solid;
  }
  .barbg{
    background: #fafafa;
  }
  .orders-border{
    position: relative;
    &:after{
      content: '';
      display: block;
      position: absolute;
      left: 0;
      bottom: 0;
      width: 100%;
      height: 1px;
      background: #e6e6e6;
    }
    &:last-child{
      &:after{
        display: none;
      }
    }
  }
  .goods-prop{
    box-sizing: border-box;
    height: 16px;
    line-height: 1.3;
    overflow:hidden;
    text-overflow:ellipsis;
    display:-webkit-box;
    -webkit-line-clamp:1;
    -webkit-box-orient:vertical;
    word-break:break-word;
  }
  .order-div {
    background-color: #fff;
    border-radius: 5px;
    font-size: 13px;
  }
  .goods-title {
    height: 35px;
    font-size: 13px;
    line-height: 1.4;
    overflow:hidden;
    text-overflow:ellipsis;
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    word-break:break-word;
  }

  .img-item {
    width: 100px;
    height: 100px;
  }

  .order-btn {
    background-color: #fff;
    color: #999999;
    font-size: 13px;
    line-height: 1;
    display: inline-block;
    padding: 6px 18px;
    border-radius: 50px;
    border: #cccccc 1px solid!important;
  }
  .order-btn2 {
    border: none!important;
    border: #ffe200 1px solid!important;
    background-color: #ffe200;
    color: #000;
    font-size: 13px;
    line-height: 1;
    display: inline-block;
    padding: 6px 25px;
    border-radius: 50px;
  }

  .btn-save {
    background-color: #f8c400;
  }

  .btn-border {
    border: 1px solid #969896;
    border-radius: 5px;
    height: 20px;
    background-color: #ffffff;
  }
</style>

